<template>
  <div>
    <div class="goodsrecycle-mokuai">
      <!-- 筛选查找 -->
      <div class="goodsrecycle-index">
        <div class="goodsrecycle-index-top">
          <div class="goodsrecycle-name">
            <div class="goodsrecycle-name-font">
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div class="goodsrecycle-name-right">
              <el-button @click="onSubmit(formInline)">查询结果</el-button>
              <el-button @click="topSelect">高级查询</el-button>
            </div>
            <div class="goodsrecycle-name-right">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
            </div>
          </div>
          <div class="goodsrecycle-content">
            <!-- 筛选条件 -->
            <div class="goodsrecycle-button-select-2" v-if="showPrise">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
              >
                <el-form-item label="输入搜索:">
                  <el-input
                    v-model="formInline.transactionId"
                    placeholder="订单编号/商品货号"
                    class="select-width-1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="收货人:">
                  <el-input
                    v-model="formInline.receiverMobile"
                    placeholder="收货手机号码"
                    class="select-width-1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提交时间:">
                  <div class="block">
                    <el-date-picker
                      v-model="formInline.createTime"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-dialog
          :title="'高级检索'"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
        >
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="输入搜索">
              <el-input
                v-model="formInline.transactionId"
                placeholder="订单编号/商品货号"
              ></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input
                v-model="formInline.receiverMobile"
                placeholder="收货人手机号码"
              ></el-input>
            </el-form-item>
        
           
            <el-form-item label="订单来源">
              <el-select v-model="formInline.sourceType">
                <el-option label="web端订单" value="1"></el-option>
              <el-option label="APP订单" value="2"></el-option>
               <el-option label="微信公众号" value="3"></el-option>
              <el-option label="微信公众号" value="4"></el-option>
               <el-option label="H5手机页面" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
              <div class="block">
                <el-date-picker
                  v-model="formInline.createTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitTwo(formInline)"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 数据模块 -->
      <div class="goodsrecycle-index">
        <div class="goodsrecycle-index-top">
          <div class="goodsrecycle-name">
            <div class="goodsrecycle-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="goodsrecycle-index-select">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
                size="small"
              >
                <!-- <el-form-item label="">
                  <el-select
                    v-model="listLine.row"
                    placeholder="显示条数"
                    class="select-width-2"
                  >
                    <el-option label="10条" value="10"></el-option>
                    <el-option label="20条" value="20"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="">
                  <el-select
                    v-model="sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                         <el-option label="提交时间" :value=0></el-option>
                       <el-option label="订单状态" :value=3></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="goodsrecycle-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="订单编号" width="90" align="center">
                  <template slot-scope="scope">{{ scope.row.transactionId}}</template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="提交时间"
                  width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户账号"
                  width="90"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="receiverContact"
                  label="收货人"
                  width="90"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalMoney"
                  label="订单金额"
                  width="130"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="orderStatus"
                  label="订单状态"
                  width="130"
                  align="center"
                >
                  <template scope="scope">                    
                    <p v-if="scope.row.orderStatus==0">待付款</p>
                    <p v-if="scope.row.orderStatus==1">待发货</p>
                    <p v-if="scope.row.orderStatus==2">已发货</p>  
                     <p v-if="scope.row.orderStatus==3">已完成</p>
                    <p v-if="scope.row.orderStatus==4">已关闭</p>             
                </template>
                </el-table-column>
                <!-- 暂时不管 -->
                <el-table-column
                  prop=""
                  label="自动确认收货时间"
                  width="90"
                  align="center"
                >
                </el-table-column>
                   <!-- 暂时不管 -->
                <el-table-column
                  prop=""
                  label="订单应收货时间"
                  width="100"
                  align="center"
                >
                </el-table-column>

                <el-table-column fixed="right" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.$index, scope.row)"
                      type="text"
                      size="small"
                      >查看订单</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      @click="confimClick(scope.$index, scope.row)"
                      >确认收货</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodsrecycle-paging">
              <!-- 批量操作 -->
              <div class="goodsrecycle-paging-leftlayout">
                <div class="opertation-block">
                  <!-- 全选需要设置方法目前只能操作0，1数据 -->
                  <el-button @click="toggleSelection(tableData)" size="small"
                    >全选</el-button
                  >
                </div>
                <div class="opertation-block">
                  <el-form
                    :inline="false"
                    :model="operation"
                    class="demo-form-inline"
                    size="small"
                  >
                    <el-form-item label="">
                      <el-select
                        v-model="operation.opertationType"
                        placeholder="批量操作"
                        class="select-width-2"
                      >
                        <el-option label="删除" value="0"></el-option>
                        <el-option label="一键确认收货" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="opertation-block">
                  <el-button size="small" @click="Sumbit()">确定</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="goodsrecycle-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                       :current-page="currentPage1"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义 */
.el-form-item {
  width: 30%;
}
a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: blue;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 100px;
}
.goodsrecycle-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsrecycle-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsrecycle-index-top {
  margin-top: 30px;
}
.goodsrecycle-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodsrecycle-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}
.goodsrecycle-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsrecycle-index-select {
  width: 260px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsrecycle-content {
  text-align: center;
  width: 100%;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodsrecycle-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsrecycle-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.goodsrecycle-paging-layout {
  float: right;
  margin-top: 7px;
}
</style>

<script>
 import orderListApi from "@/api/order/orderlist";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            }
          }
        ]
      },
      date: "",
      date2: "",
      // 隐藏
      showPrise: true,

      // 开启筛选模式
selectrue:false,
      // 筛选
      formInline: {
            
                   transactionId:null,
                   receiverMobile:null,
                   createTime:null,
                  sourceType:null
      },
      listLine: {
        row: "",
        sort: ""
      },
      operation: {
        opertationType: null
      },
      dialogVisible: false,
      // 列表数据
      tableData: [
       
      ],
      // 临时存储单条修改完成的数据
updateOne:{
id:"",
orderStatus:3,
},

      multipleSelection: [],
      // 分页
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,
      sort: 0,
    }
  },

    watch:{
          // 排序方式改变触发
          sort(val, newval) {
      console.log(val);
      console.log(newval);
       if(this.selectrue==true){
 this.intDataSelect(this.currentPage1, this.pageSize,this.sort,this.formInline.transactionId,
                  this.formInline.receiverMobile, this.formInline.createTime,this.formInline.sourceType)
      }else{
         this.initData(this.currentPage1, this.pageSize,val);
      }
    },
        },
  methods: {
    // 数据列表
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 批量操作选择
    handleSelectionChange(val) {
          // 因为此方法是在选择改变时调用，所以必须初始化数组 如果不初始化数组 数组将会层层叠加
      this.multipleSelection = [];
       // 为multipleSelection赋值   multipleSelection为id数组
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
    Sumbit(){

      console.log(this.multipleSelection);
      // 判断执行什么操作
       if(this.operation.opertationType==null){
         this.$message("没有选择无法执行");
       };
      //  删除
        if(this.operation.opertationType==0){
            orderListApi.deleteList(this.multipleSelection).then(response=>{

                console.log(response);
                this.$router.go(0);
               })
       };
      //  修改状态为发货
        if(this.operation.opertationType==1){
      
         console.log(this.multipleSelection);
               orderListApi.updateListSuccess(this.multipleSelection).then(response=>{

                console.log(response);
                this.$router.go(0);
               })
       }

    },
    handleClick(index, row) {
     this.$router.push({
        path: "/order/lookOrderNoPay",
        query: { id: row.id,transactionId:row.transactionId}
      });
    },
    // 分页
    handleSizeChange(val) {
        this.pageSize = val;
      console.log("搁到" + this.pageSize);
    
                 if(this.selectrue==true){
 this.intDataSelect(this.currentPage1, this.pageSize,this.sort, this.formInline.transactionId,
                  this.formInline.receiverMobile, this.formInline.createTime,this.formInline.sourceType)
      }else{
         this.initData(this.currentPage1, this.pageSize, this.sort);
      }
           
    },
    handleCurrentChange(val) {
         this.currentPage1=val;
      console.log("搁到" + this.pageSize);

                 if(this.selectrue==true){
 this.intDataSelect(this.currentPage1, this.pageSize,this.sort,this.formInline.transactionId,
                  this.formInline.receiverMobile, this.formInline.createTime,this.formInline.sourceType)
      }else{
         this.initData(this.currentPage1, this.pageSize, this.sort);
      }
    },
    onSubmit(formInline) {
    this.intDataSelect(this.currentPage1, this.pageSize,this.sort,formInline.transactionId,
                 formInline.receiverMobile, formInline.createTime,formInline.sourceType)
    },
    onSubmitTwo(formInline){
this.intDataSelect(this.currentPage1, this.pageSize,this.sort,formInline.transactionId,
                 formInline.receiverMobile, formInline.createTime,formInline.sourceType)
    },
    topSelect() {
      console.log("submit!")
      this.dialogVisible = true
    },
    packUp() {
      this.showPrise = !this.showPrise
      console.log("submit!")
    },
    confimClick(index, row) {

this.updateOne.id=row.id;

      // 确认收货
     orderListApi.updateOne(this.updateOne).then(response=>{

       console.log(response.data.message);
       this.$message(response.data.message);
       this.$router.go(0);
     })
    },

// 获取本页基本数据
   initData: function (pageNum,pageSize,sort){
                orderListApi.pageOrderTwo(pageNum,pageSize,sort).then(response => {
                    console.log(response);
                  
                  var data = JSON.parse(JSON.stringify(response.data.data.list));
                 console.log(data);
              
                    this.tableData = data;
                       this.total = response.data.data.total;
                       
                });
            },
                // 筛选模式方法
            intDataSelect(pageNum, pageSize, sort, transactionId,
                  receiverMobile, createTime,sourceType){

if(transactionId!=null||receiverMobile!=null||createTime!=null||sourceType!=null){
        this.selectrue=true;
      }else{
        this.selectrue=false;
      };
 console.log("筛选模式:"+this.selectrue);
 var time=this.parseTime(createTime);

orderListApi.pageSelectTwo(pageNum,
        pageSize, sort,
      transactionId,
       receiverMobile, time,sourceType).then(response => {
         console.log(response);
           var data = JSON.parse(JSON.stringify(response.data.data.list));
           console.log(data);
                    this.tableData = data;
                       this.total = response.data.data.total;
                });
            },
// 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }

      let d = new Date(str);

      let newDateYear = d.getFullYear();

      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;

      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";

      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    }

  },
  mounted(){

    this.initData(this.currentPage1, this.pageSize, this.sort);
  }
}
</script>
